<template>
  <div class="income">
    <ul class="tabTit">
      <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
    </ul>
    <div class="tabCon">
      <ul class="income_main">
        <li class="flex" v-for="(itemCon,index) in tabContent0" v-show="0 == num">
          <div class="income_left">
            <p>订单编号：{{itemCon.ordersn}}</p>
            <!-- <p>{{itemCon.addtime}}</p> -->
            <p>订单收入</p>
            <p class="income_time">{{itemCon.addtime}}</p>
          </div>
          <p class="income_right">+{{itemCon.commission}}</p>
        </li>
      </ul>
      <ul class="income_main">
        <li class="flex" v-for="(itemCon,index) in tabContent1" v-show="1 == num">
          <div class="income_left">
            <!-- <p>{{itemCon.to}}</p> -->
            <p v-if="itemCon.status == 2">提现成功</p>
            <p v-if="itemCon.status == 1">审核中</p>
            <p v-if="itemCon.status == 3">已拒绝</p>
            <p class="income_time">{{itemCon.addtime}}</p>
          </div>
          <p class="income_right">{{itemCon.money}}</p>
        </li>
      </ul>
    </div>
    <!-- 更新经纬度 -->
    <lat-lng></lat-lng>
  </div>
</template>




<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'income',
  data () {
    return {
      num: 0,
      tabs: ["收入明细", "提现明细"],
      tabContent0: [
        {
          number: '2018071508305901',
          from: '订单收入',
          time: '2018-17-15',
          price:'18.00',
        },
        {
          number: '2018071508305901',
          from: '订单收入',
          time: '2018-17-15',
          price:'18.00',
        },
        {
          number: '2018071508305901',
          from: '订单收入',
          time: '2018-17-15',
          price:'18.00',
        },
      ],
      tabContent1: [
        {
          to: '提现',
          time: '2018-17-15',
          price:'18.00',
        },
        {
          to: '提现',
          time: '2018-17-15',
          price:'18.00',
        },
        {
          to: '提现',
          time: '2018-17-15',
          price:'18.00',
        },
        {
          to: '提现',
          time: '2018-17-15',
          price:'18.00',
        },
      ],
    }
  },
  mounted(){
    this.getInfoIn();
    this.getInfoOut();
    this.$root.washShare();
  },
  methods: {
    tab(index) {
      this.num = index;
    },
    // 获取信息
    getInfoIn(){
      var that = this;
      axios.get(global.api.order.worker.inCome,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          page: '1',
          size: '1000',
        }
      })
      .then(function(res){
        console.log("getInfoIn then");
        console.log(res);
        that.tabContent0 = res.data.data;
      })
      .catch(function(res){
        console.log("getInfoIn catch");
        console.log(res);
      }) 
    },
    getInfoOut(){
      var that = this;
      axios.get(global.api.order.worker.withdraw,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("getInfoOut then");
        console.log(res);
        that.tabContent1 = res.data.data;
      })
      .catch(function(res){
        console.log("getInfoOut catch");
        console.log(res);
      }) 
    },
  },
}
</script>




<style scoped>
  /*tab主体*/
  .tabTit{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 1.3rem 1rem 0.5rem;
    border: 1px solid #2ecc80;
    border-radius: 5px;
  }
  .tabTit li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    color: #2ecc80;
    font-size: 0.9rem;
  }
  .tabTit .active{
    background-color: #2ecc80;
    color: #fff;
  }
  /*内容*/
  .tabCon{}
  .income_main{}
  .income_main li{
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem 0.5rem;
    border-bottom: 1px solid #B3B3B4;
  }
  .income_left{
    text-align: left;
    font-size: 0.9rem;
  }
  .income_left p{
    line-height: 1.75rem;
  }
  .income_time{
    color: #888888;
  }
  .income_right{
    font-size: 1rem;
    color: #2ECC80;
  }
</style>
<style>
  button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .flex_1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
</style>